<template>
	<view>
	   <!-- 页首 -->
	   <zw-header></zw-header>
	   <!-- 面包屑 -->
	   <bread-crumb pages="afterservice"></bread-crumb>
	   <tool-bar :scrollTop="scrollTop"></tool-bar>
	   <!-- 地图显示 -->
	   <view class="map-top">
		   <!-- 
		     此处这里需要付费才能正常显示
		   -->
			 <div id="Gmaps"></div>
			 <remote-js
				   jsUrl="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdZdeIc82wgWQuggkEhp2soCtQSqaZKeE"
				   :js-load-call-back="loadRongJs"
			 ></remote-js>
	   </view>
	   <!-- 底部联系-->
	   <view class="map-bottom">
		   <view class="map-bottom-left">
			   <text class="ap-bottom-left-wz">
				   Please fill in the form, our sales representative will get back to you shortly!
			   </text>
			   <view class="ap-bottom-left-form">
				  <view class="ap-bottom-left-form-top">
				  	<input type="text" v-model="liuyanMsgObj.name" placeholder="Name"  maxlength="30" class="ap-bottom-left-form-top-name"/>
					<input type="text" v-model="liuyanMsgObj.email" placeholder="Email" maxlength="30" class="ap-bottom-left-form-top-email"/>	  
				  </view>
				   <view class="ap-bottom-left-form-mid">
					   <input type="text" v-model="liuyanMsgObj.phoneNum" placeholder="Phone Number" maxlength="12" class="ap-bottom-left-form-top-phone"/>  
				   </view>
				   <view class="ap-bottom-left-form-mid">
				   	    <textarea v-model="liuyanMsgObj.content" placeholder="Message" maxlength="300" class="ap-bottom-left-form-top-textArea"></textarea>
				   </view>
				   <view class="ap-bottom-left-form-mid">
						<button class="SendBtn" @click="sendMsgInfo">SEND</button>
				   </view>
			   </view>
		   </view>
		   <view class="map-bottom-right">	
		    <image src="../../static/image/common/LogoCart.png" class="map-bottom-right-image"></image>
			   <view class="map-bottom-right-top">
                    <view class="map-bottom-right-one">
					   <view class="map-bottom-right-one-left">
						   <image src="../../static/image/common/loaction.png" class="map-bottom-right-one-left-image"></image> 
					   </view>
					   <view class="map-bottom-right-one-right">
						 <text>Gold Coast: 4/14 Hilldon Court, Nerang 4211 QLD</text>
						 <text>Caboolture: 2/18-20 Lear Jet Dr, Caboolture QLD 4510</text>
						 <text>Brisbane: 4 Pindari St, Rochedale South 4123 QLD</text>   
					   </view>
				   </view>
				   <view class="map-bottom-right-one">
					   <view class="map-bottom-right-one-left">
						   <image src="../../static/image/common/phonelogo.png"
							class="map-bottom-right-one-left-image" style="width: 20px; height: 18px;"></image> 
					   </view>
					   <view class="map-bottom-right-one-right">
						 <text>(07) 5627 4000 or 0448 727 830</text> 
					   </view>
				   </view>
				   <view class="map-bottom-right-one">
						   <view class="map-bottom-right-one-left">
							   <image src="../../static/image/common/email.png"
								class="map-bottom-right-one-left-image" style="width: 23px; height: 18px;"></image> 
						   </view>
						   <view class="map-bottom-right-one-right">
							 <text>sales@appleshelving.com.au</text>   
						   </view>
				   </view>
			   </view>
			   <view class="map-bottom-right-top" style="padding-left: 15px;">
					<text class="map-bottom-right-topbt">Opening Hours</text>
					<text style="font-size: 13px;">Mon - Fri : 9am - 5pm</text>
					<text style="font-size: 13px;">Saturday: 9am - 3pm</text>
			   </view>
			  <view class="map-bottom-right-top" style="padding-left: 15px;">
				  <text class="map-bottom-right-topbt">Stay Connected</text>
				  <image style="width: 19px; height: 25px; 
				  margin-top: 5px;" src="../../static/image/common/facebook.png" @click="StayConnectionAct()"></image>
			  </view> 
		   </view>
	   </view>
	   <!-- 页脚 -->
	   <zw-footer></zw-footer>
	</view>
</template>

<script>
	import toolBar from '@/components/home/tool-bar.vue'; //工具栏
	import RemoteJs from '@/components/Gmaps/remote.vue'
	export default {
		data() {
			return {
				mapData:{
					//经度
					longitude:90.41252,
					//纬度
					latitude:23.81033,
					address:""
				},
				scrollTop: 0,
				liuyanMsgObj:{
					name:"",
					email:"",
					phoneNum:"",
					content:""
				}
			}
		},
		onShow() {
			// 监听滚动
			window.addEventListener('scroll', this.onScroll);
		},
		onHide() {
			// 取消滚动监听
			window.removeEventListener('scroll', this.onScroll);
		},
		components: { RemoteJs,toolBar },
		methods: {
			//加载谷歌地图
			loadRongJs() {
			  // console.log(this.mapData)
			  var options = {
			    zoom: 15,
			    // 1：世界
				// 5：大陆/大陆
				// 10：城市
				// 15：街道
				// 20：建筑物
			    center: { lat: this.mapData.latitude, lng: this.mapData.longitude },
			    // 动态从调用组件传递经纬度
			    disableDefaultUI: false,
			    zoomControl: true
			  }
			  var map = new google.maps.Map(document.getElementById('Gmaps'), options)
			  let marker = new google.maps.Marker({
			    position: { lat: this.mapData.latitude, lng: this.mapData.longitude },
			    map: map,
			    title: 'Google Map', // 鼠标悬浮显示
			    // 此处的icon为标记的自定义图标
			    // icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
			    // animation:  google.maps.Animation.DROP,
			    width: '20px',
			    height: '20px'
			  })
			  marker.setMap(map)
			 // 配置定位点鼠标点击显示内容 本文是父组件传过来的
			  var infowindow = new google.maps.InfoWindow({
			    content: this.mapData.address
			  })
			  marker.addListener('click', function() {
			    infowindow.open(map, marker)
			  })
			},
			//发送留言
			sendMsgInfo(){
			   console.log(this.liuyanMsgObj);
			},
			onScroll() {
				this.scrollTop = window.scrollY;
			},
			//联系指定facebook
			StayConnectionAct(){
				console.log("联系指定faceBook");
			}
		}
	}
</script>

<style  lang="scss" scoped>
  @import url("after.css");
</style>
